<template>
  <scroll-view @scrolltolower="handletolower" scroll-y class="home-recommend">
    <view class="recommend-wrap">
      <view class="recommend-item"
      v-for="item in recommends"
      :key="item.id">
        <img :src="item.thumb" alt="">
      </view>
    </view>
    <view class="month-wrap">
      <view class="month-title"> 
        <view class="month-title-info">
          21年 {{months.MM}}月 {{months.DD}} {{months.title}}
        </view>
        <view class="month-title-more">更多 > </view>
      </view>
      <view class="month-content">
        <view class="month-item" v-for="item in months.items" :key="item.id">
          <img :src="item.thumb+item.rule.replace('$<Height>',360)" alt="" id="month-img">
        </view>
      </view>
    </view>
    <view class="hots-wrap">
      <view class="hots-title">热门</view>
      <view class="hots-content">
        <view class="hots-item" v-for="item in hots" :key="hots.id">
          <img :src="item.thumb" alt="">
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import moment from 'moment';
export default {
  name: 'home-recommend',
  data() { 
    return {
      recommends:[],
      months:{},
      hots:[],
      params:{
        limit:30,
        order:"hot",
        skip:0
      }
    }
  },
  mounted(){
    this.getData()
    uni.setNavigationBarTitle({title:"推荐"})
  },
  methods:{
    handletolower(){
      // console.log(123);
      this.params.skip += this.params.limit
      this.getData()
    },
    getData(){
      this.request({
      url:"http://service.picasso.adesk.com/v3/homepage/vertical",
      data: this.params
    }).then(res=>{
        if(this.recommends.length===0){
          console.log(res);
          this.recommends = res.data.res.homepage[1].items
          this.months = res.data.res.homepage[2]
          this.months.MM =moment(this.months.stime).format('MM')
          this.months.DD =moment(this.months.stime).format('DD')
        }
      // this.hots = [...this.hots,...this.res.data.res.vertical]
        this.hots = [...this.hots,...res.data.res.vertical]
    })
    }
  }
 }
</script>

<style lang="scss" scoped>
  .home-recommend{
    height: calc(100vh - 36px);
  }
.month-title{
  display: flex;
  position: relative;
  background-color: pink;
}
.month-title-info{
  flex: 1;
}
.month-title-more{
  position: absolute;
  right: 0px;
  top:0px;
  font-size: 12px;
  color: #fff;
}
.hots-title{
  text-align: center;
  background-color: pink;
}

</style>